<template>
  <div class="catalog-demo">
    <h2>Catalog 目录组件演示</h2>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="基础用法" name="basic">
        <div class="demo-block">
          <h3>基础目录树</h3>
          <Catalog
            :data="basicData"
            @node-click="handleNodeClick"
            @add="handleAdd"
            @edit="handleEdit"
            @delete="handleDelete"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="带图标和徽章" name="icon">
        <div class="demo-block">
          <h3>带图标和徽章的目录</h3>
          <Catalog
            :data="iconData"
            @node-click="handleNodeClick"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="可拖拽" name="draggable">
        <div class="demo-block">
          <h3>可拖拽目录</h3>
          <Catalog
            :data="draggableData"
            :draggable="true"
            @drop="handleDrop"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="多选模式" name="checkbox">
        <div class="demo-block">
          <h3>多选目录</h3>
          <Catalog
            ref="checkboxCatalogRef"
            :data="checkboxData"
            :show-checkbox="true"
            @check="handleCheck"
          />
          <div class="demo-actions">
            <el-button type="primary" @click="getChecked">获取选中节点</el-button>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="自定义配置" name="custom">
        <div class="demo-block">
          <h3>自定义配置</h3>
          <Catalog
            :data="customData"
            :default-expand-all="true"
            :expand-on-click-node="true"
            :addable="false"
            :deletable="false"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 操作日志 -->
    <div v-if="logs.length > 0" class="demo-logs">
      <h3>操作日志</h3>
      <el-timeline>
        <el-timeline-item
          v-for="(log, index) in logs"
          :key="index"
          :timestamp="log.time"
          placement="top"
        >
          {{ log.message }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Folder, 
  Document, 
  Files,
  Setting,
  User,
  House
} from '@element-plus/icons-vue'
import Catalog from './Catalog/Catalog.vue'

const activeTab = ref('basic')
const checkboxCatalogRef = ref(null)
const logs = ref([])

// 添加日志
const addLog = (message) => {
  logs.value.unshift({
    message,
    time: new Date().toLocaleString()
  })
  if (logs.value.length > 10) {
    logs.value.pop()
  }
}

// 基础数据
const basicData = ref([
  {
    id: 1,
    label: '一级目录 1',
    children: [
      {
        id: 11,
        label: '二级目录 1-1',
        children: [
          { id: 111, label: '三级目录 1-1-1' },
          { id: 112, label: '三级目录 1-1-2' }
        ]
      },
      { id: 12, label: '二级目录 1-2' }
    ]
  },
  {
    id: 2,
    label: '一级目录 2',
    children: [
      { id: 21, label: '二级目录 2-1' },
      { id: 22, label: '二级目录 2-2' }
    ]
  },
  {
    id: 3,
    label: '一级目录 3'
  }
])

// 带图标和徽章的数据
const iconData = ref([
  {
    id: 1,
    label: '首页',
    icon: House,
    tag: '热门',
    tagType: 'danger'
  },
  {
    id: 2,
    label: '文档中心',
    icon: Files,
    badge: 5,
    children: [
      {
        id: 21,
        label: '产品文档',
        icon: Document,
        badge: 3
      },
      {
        id: 22,
        label: 'API 文档',
        icon: Document,
        badge: 2
      }
    ]
  },
  {
    id: 3,
    label: '用户管理',
    icon: User,
    tag: '新',
    tagType: 'success',
    children: [
      {
        id: 31,
        label: '用户列表',
        icon: Document
      },
      {
        id: 32,
        label: '角色管理',
        icon: Document
      }
    ]
  },
  {
    id: 4,
    label: '系统设置',
    icon: Setting,
    children: [
      {
        id: 41,
        label: '基础设置',
        icon: Document
      },
      {
        id: 42,
        label: '安全设置',
        icon: Document
      }
    ]
  }
])

// 可拖拽数据
const draggableData = ref([
  {
    id: 1,
    label: '可拖拽节点 1',
    children: [
      { id: 11, label: '子节点 1-1' },
      { id: 12, label: '子节点 1-2' }
    ]
  },
  {
    id: 2,
    label: '可拖拽节点 2',
    children: [
      { id: 21, label: '子节点 2-1' },
      { id: 22, label: '子节点 2-2' }
    ]
  },
  {
    id: 3,
    label: '可拖拽节点 3'
  }
])

// 多选数据
const checkboxData = ref([
  {
    id: 1,
    label: '选项 1',
    children: [
      { id: 11, label: '选项 1-1' },
      { id: 12, label: '选项 1-2' }
    ]
  },
  {
    id: 2,
    label: '选项 2',
    children: [
      { id: 21, label: '选项 2-1' },
      { id: 22, label: '选项 2-2' }
    ]
  }
])

// 自定义配置数据
const customData = ref([
  {
    id: 1,
    label: '产品分类',
    children: [
      {
        id: 11,
        label: '电子产品',
        children: [
          { id: 111, label: '手机' },
          { id: 112, label: '电脑' },
          { id: 113, label: '平板' }
        ]
      },
      {
        id: 12,
        label: '家居用品',
        children: [
          { id: 121, label: '家具' },
          { id: 122, label: '装饰' }
        ]
      }
    ]
  },
  {
    id: 2,
    label: '服务分类',
    children: [
      { id: 21, label: '咨询服务' },
      { id: 22, label: '技术支持' }
    ]
  }
])

// 节点点击
const handleNodeClick = (data, node) => {
  addLog(`点击节点: ${data.label}`)
  ElMessage.success(`点击了节点: ${data.label}`)
}

// 添加节点
const handleAdd = (parentData) => {
  const label = parentData ? `${parentData.label} 的子节点` : '新节点'
  addLog(`添加节点: ${label}`)
  ElMessage.success(`添加节点: ${label}`)
  
  // 实际应用中，这里应该调用 API 保存数据
  const newNode = {
    id: Date.now(),
    label: `新节点 ${Date.now()}`
  }
  
  if (parentData) {
    if (!parentData.children) {
      parentData.children = []
    }
    parentData.children.push(newNode)
  } else {
    basicData.value.push(newNode)
  }
}

// 编辑节点
const handleEdit = (data) => {
  addLog(`编辑节点: ${data.label}`)
  ElMessage.success(`编辑节点: ${data.label}`)
  // 实际应用中，这里应该调用 API 更新数据
}

// 删除节点
const handleDelete = (data, node) => {
  addLog(`删除节点: ${data.label}`)
  ElMessage.success(`删除节点: ${data.label}`)
  
  // 实际应用中，这里应该调用 API 删除数据
  const removeNode = (tree, targetId) => {
    for (let i = 0; i < tree.length; i++) {
      if (tree[i].id === targetId) {
        tree.splice(i, 1)
        return true
      }
      if (tree[i].children) {
        if (removeNode(tree[i].children, targetId)) {
          return true
        }
      }
    }
    return false
  }
  
  removeNode(basicData.value, data.id)
}

// 拖拽放置
const handleDrop = (draggingNode, dropNode, dropType) => {
  addLog(`拖拽 ${draggingNode.data.label} 到 ${dropNode.data.label} 的 ${dropType}`)
  ElMessage.success('拖拽成功')
}

// 复选框选中
const handleCheck = (data, checked) => {
  addLog(`${checked.checkedKeys.includes(data.id) ? '选中' : '取消选中'}: ${data.label}`)
}

// 获取选中节点
const getChecked = () => {
  const nodes = checkboxCatalogRef.value.getCheckedNodes()
  const labels = nodes.map(node => node.label).join(', ')
  ElMessage.success(`选中的节点: ${labels || '无'}`)
  addLog(`选中的节点: ${labels || '无'}`)
}
</script>

<style scoped>
.catalog-demo {
  padding: 20px;
}

h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
}

.demo-block {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 20px;
}

.demo-block h3 {
  font-size: 18px;
  color: #606266;
  margin-bottom: 16px;
}

.demo-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.demo-logs {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.demo-logs h3 {
  font-size: 18px;
  color: #606266;
  margin-bottom: 16px;
}
</style>

